<template>
  <view class="lz-tree">
    <view class="example-body">
      <uni-search-bar
        class="uni-search-bar"
        clearButton="always"
        :placeholder="$t('关键词')"
        radius="100"
        @cancel="cancel"
        @confirm="search"
        @input="input"
      />
    </view>
    <ly-tree
      ref="tree"
      :checkStrictly="true"
      :currentNodeKey="currentNodeKeyData"
      :defaultCheckedKeys="defaultCheckedKeysData"
      :filter-node-method="filterNode"
      :props="defaultProps"
      :tree-data="treeData"
      checkOnClickNode
      highlightCurrent
      node-key="id"
      showRadio
      @radio-change="handleRadioChange"
    ></ly-tree>
    <view v-if="selectValue" class="footer">
      <view class="left">{{$t('已选择')}}：{{ selectValue.name }}</view>
      <view class="rigth" @click="endEmployees">{{$t('确定')}}</view>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  components: {},
  computed: {
    ...mapGetters(['userInfo', 'api'])
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'childrens',
        label: 'name'
      },
      selectValue: '', //已选择
      defaultCheckedKeysData: [], //回显勾选
      currentNodeKeyData: '' //回显高亮
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  onLoad(e) {
    uni.setNavigationBarTitle({title: this.$t('选取组织')})
    //获取组织列表
    this.getLevelsByOrg()
    //回显
    this.showData(e)
  },
  methods: {
    //回显
    showData(e) {
      if (e.departmentId) {
        this.defaultCheckedKeysData = [e.departmentId]
        this.currentNodeKeyData = e.departmentId
        this.selectValue = {
          name: e.departmentName || '',
          id: e.departmentId
        }
      }
    },
    //获取组织列表
    getLevelsByOrg() {
      this.$u
        .post(this.api.GLOBAL_auth_department_getLevelsByOrg, { orgId: this.userInfo.orgId })
        .then((res) => {
          if (res.code === 200) {
            this.treeData = res.data
          } else {
            this.treeData = []
          }
        })
    },
    //搜索
    search(res) {
      this.$refs.tree.filter(res.value)
    },
    input(res) {
      this.$refs.tree.filter(res.value)
    },
    cancel(res) {
      this.$refs.tree.filter('')
    },
    //单选
    handleRadioChange(obj) {
      if (obj.checked) {
        this.selectValue = obj.data
      }
      // if(obj.checked){
      // 	this.selectValue=obj.data
      // 	//console.log(obj.data);
      // }else{
      // 	this.defaultCheckedKeysData=[obj.data.id]
      // }
    },
    //搜索过滤
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    //确认
    endEmployees() {
      uni.$emit('organizationTree', this.selectValue)
      uni.navigateBack({
        delta: 1
      })
    }
    // handleNodeClick(obj) {
    // 	//console.log('handleNodeClick', JSON.stringify(obj));
    // 	//console.log('getNodePath', this.$refs.tree.getNodePath(obj.data));
    // }
  }
}
</script>

<style lang="scss" scoped>
.lz-tree {
  width: 100%;
  padding-bottom: 100rpx;
  box-sizing: border-box;

  .example-body {
    position: sticky;
    top: 0;
  }

  .footer {
    z-index: 100;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: white;
    font-size: 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    box-sizing: border-box;

    .left {
      color: #007aff;
      flex: 1;
    }

    .rigth {
      padding: 10rpx 20rpx;
      background: #007aff;
      color: white;
      border-radius: 8rpx;
      width: 100upx;
    }
  }
}
</style>
